//
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------

@base-unit: 			  16px;	

// Colors
// -------------------------

@color-gray-50:           #262524;
@color-gray-70:           #403e3d;
@color-gray-80:	          #504e4c;
@color-gray-90:           #696663;
@color-gray-100:          #a3a2a2;
@color-gray-130:          #bdbbbb; 
@color-gray-140:          #d6d9d6;  
@color-gray-150:          #e5e5e5;
@color-gray-160:          #f7f7f7;

@color-green-70:          #355e00;
@color-green-100:         #497d04;
@color-green-120:         #95be5f;
@color-green-130:         #d7ebbf;

@color-blue-70:           #0f6194;
@color-blue-100:          #1175ae;
@color-blue-120:          #73bae6;
@color-blue-130:          #d0e8ed;

@color-red-70:            #b12628;
@color-red-100:           #e14344;
@color-red-130:           #ffdddd;

@color-orange-70:         #a15700;
@color-orange-80:         #c98209;
@color-orange-100:        #f4eac9;
@color-orange-130:        #e5e0cb;

@color-purple-100:        #784B84;

@color-white:             #ffffff;

@color-app-facebook:      #3b5998;
@color-app-twitter:       #55acee;
@color-app-linkedin:      #007bb6;
@color-app-sharepoint:    #1372b8;

// ------------------------

@color-success:           @color-green-100;
@color-info:              @color-blue-100;
@color-warning:           @color-orange-80;
@color-error:             @color-red-100;

@body-bg:                 @color-white;
@text-color:              @color-gray-50;

// Links
// -------------------------

@link-color:              @color-blue-70;
@link-hover-color:        @color-blue-70;
@link-installer-color:    @color-white;     // Hyperlink in installer should have different color than installer background

// Typography
// -------------------------
@font-family-sans-serif:  "Segoe UI", Helvetica, Verdana, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   "Courier New", monospace;
@font-family-semibold:    "Segoe UI Semibold", Helvetica, Verdana, Arial, sans-serif;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          @base-unit * 0.875;	// ~14px
@font-size-large:         @base-unit * 1.125; 	// ~18px
@font-size-huge:          @base-unit * 1.5;     // ~24px
@font-size-small:         @base-unit * 0.75;	// ~12px

@line-height-50:          @base-unit * 0.625; // ~10px
@line-height-80:          @base-unit;
@line-height-100:         @base-unit * 1.25; // ~20px
@line-height-150:         @base-unit * 1.5;
@line-height-200:         @base-unit * 2; // ~32

@headings-font-family:    @font-family-base;
@headings-font-weight:    bold;

@white-space-width:       @base-unit * 0.25;

// Iconography
// -------------------------

@icon-font-path:          "./fonts/";
@icon-font-name:          "Core-icons";

@icon-size-200:           @base-unit * 4;    // ~64px App icons on dashboard
@icon-size-150:           @base-unit * 2;    // ~32px Notifications
@icon-size-130:           @base-unit * 1.75; // ~28px Reserved for Kentico logo
@icon-size-100:           @base-unit * 1.5;  // ~24px Icons in header
@icon-size-80:            @base-unit;        // ~16px Standard icon size
@icon-size-50:            @base-unit * 0.75; // ~12px Tree icons
@icon-size-30:            @base-unit * 0.5;  // ~8px Only for statuses or indicators

// Icon color on light background
@light-bg-icon-color:                 @color-gray-70;
@light-bg-icon-hover-color:           @color-blue-70;

// Icon color on dark background
@dark-bg-icon-color:                  @color-gray-100;


// Components
// -------------------------

@padding-base-vertical:          @base-unit * 0.25; // ~4px
@padding-base-horizontal:        @base-unit; // ~16px

@padding-middle-vertical:        @base-unit * 0.375; // ~6px
@padding-middle-horizontal:      @base-unit; // ~16px

@padding-large-vertical:         @base-unit * 0.625; // ~10px
@padding-large-horizontal:       @base-unit; // ~16px

@padding-small-vertical:         @base-unit * 0.25; // ~4px
@padding-small-horizontal:       @base-unit * 0.5; // ~8px

@padding-xlarge-vertical:        @base-unit; // ~16px
@padding-xlarge-horizontal:      @base-unit * 1.25; // ~20px

@padding-loader-vertical:        @base-unit; // ~16px
@padding-loader-horizontal:      @base-unit * 2.5; // ~40px

@padding-350:                    @base-unit * 3.5; //  ~56px

@margin-50:                      @base-unit * 0.5; // ~8px
@margin-base:                    @base-unit; // ~16px
@margin-150:                     @base-unit * 1.5; // ~24px

@border-radius-base:             2px;
@border-radius-large:            3px;
@border-radius-xlarge:           5px;
@border-radius-small:            0px;

@component-active-bg:            @color-blue-70;

@caret-width-base:               @base-unit * 0.375;
@caret-width-large:              @base-unit * 0.375;

// Disabled style for buttons and dropdown menu
@action-disabled-bg:             @color-gray-100;
@action-disabled-bg-stripe:      @color-gray-130;
@action-disabled-color:          @color-gray-90;

// Tables
// -------------------------

@table-cell-padding:             @base-unit * 0.375 @base-unit * 0.5;
@table-cell-link:                @color-blue-70;
@table-condensed-cell-padding:   @base-unit * 0.375;

@table-line-height:              @line-height-100;

@table-bg:                       transparent; // overall background-color
@table-bg-accent:                @color-blue-130; // for striping
@table-bg-hover:                 @table-bg-accent;
@table-bg-hover-border:          @color-blue-120;
@table-bg-active:                @table-bg-accent;

@table-border-color:             @color-gray-150; // table and cell border
@table-first-column-width:       @base-unit * 22;

@table-margin-bottom:            @base-unit;

@table-th-text-color:            @color-gray-50;
@table-th-link-color:            @color-gray-50;
@table-th-bg:                    @color-gray-150;
@table-icon-head-color:          @color-gray-100;

@table-textbox-height:           @base-unit * 1.375;

// Table main column width
//---------------------------
@main-column-10:   10%;
@main-column-20:   20%;
@main-column-30:   30%;
@main-column-40:   40%;
@main-column-50:   50%;
@main-column-60:   60%;
@main-column-70:   70%;
@main-column-80:   80%;
@main-column-90:   90%;
@main-column-100:  100%;

// Buttons
// -------------------------

@btn-height:                     @base-unit * 2;
@btn-line-height:                @line-height-200;
@btn-shadow-width:               3px;

@btn-default-color:              @color-gray-50;
@btn-default-bg:                 @color-gray-130;
@btn-default-border:             @color-gray-100;
@btn-default-box-shadow:		 @color-gray-100;

@btn-primary-color:              @color-white;
@btn-primary-bg:                 @color-green-100;
@btn-primary-box-shadow:         @color-green-70;

@btn-secondary-color:            @color-white;
@btn-secondary-bg:               @color-blue-100;
@btn-secondary-box-shadow:       @color-blue-70;

@btn-link-disabled-color:        @color-gray-130;

@btn-icononly-padding:           @base-unit * 0.5;

// Forms
// -------------------------

@input-bg:                         @color-gray-160;
@input-bg-disabled:                @color-gray-150;


@input-color:                      @color-gray-50;
@input-color-disabled:             @color-gray-90;
@input-border:                     @color-gray-130;
@input-border-radius:              @border-radius-large;
@input-border-focus:               @color-blue-100;	// apply as border
@input-border-width:               2px;

@input-color-placeholder:          @color-gray-80;

@input-height-base:                @base-unit * 2;
@input-height-large:               @base-unit * 2.25;
@input-height-small:               @base-unit * 1.75;

@input-max-width:                  @base-unit * 20;
@explanation-text-max-width:       @input-max-width;

@legend-color:                     @color-gray-70;
@legend-border-color:              @color-gray-150;

@input-group-addon-bg:             @color-gray-150;
@input-group-addon-border-color:   @input-border;

@switch-height:                     @base-unit * 1.25; // ~20px
@switch-width:                      @base-unit * 2.75; // ~44px

@form-group-margin:                 @base-unit * 0.75;
@form-explanation-text-margin-top:  @base-unit * 0.375;

@field-check-color-success:         @color-green-100;
@field-check-color-warning:         @color-orange-80;
@field-check-color-error:           @color-red-100;

@macro-edit-icon-padding:           @base-unit * 0.625 @base-unit * 0.375;

// Dropdowns
// -------------------------

@dropdown-bg:                    @color-gray-70;
@dropdown-divider-bg:            @color-gray-80;
@dropdown-min-width:             @base-unit * 15; 
@dropdown-max-width:             @base-unit * 15;

@dropdown-link-active-color:     @color-white;
@dropdown-link-active-bg:        @color-gray-80;

@dropdown-link-color:            @color-white;
@dropdown-link-hover-color:      @color-white;
@dropdown-link-hover-bg:         @color-gray-80;

@dropdown-link-disabled-color:   @dropdown-link-active-bg;

@dropdown-header-color:          @color-white;

@dropdown-caret-color:           @color-white;

@dropup-color:                   @color-white;
@dropup-bg:                      @color-gray-70;
@dropup-item-bg:                 @color-gray-70;
@dropup-item-hover-bg:           @color-gray-80;
@dropup-min-width:               @base-unit * 12;


// COMPONENT VARIABLES
// --------------------------------------------------


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)

@zindex-btn-group-active:     2;
@zindex-pagination:           50;
@zindex-codemirror:           @zindex-codemirror-fullsreen - 10;
@zindex-codemirror-fullsreen: 500;
@z-index-codemirror-toolbar:  19993;
@zindex-alert:                10500;  // Was 20000
@zindex-alert-info:           10501;  // Was 20001
@zindex-navbar-placeholder:   10980;
@zindex-navbar-help:          10990;
@zindex-navbar:               11000;
@zindex-dropdown:             11005;
@zindex-popover:              11010;
@zindex-navbar-fixed:         11030;
@zindex-modal-background:     11040;
@zindex-modal:                11050;
@zindex-anchordropup:         20001;
@zindex-async-dialog-bg:      20100;
@zindex-async-dialog:         20200;
@zindex-applist:              42000;
@zindex-loader:               42100;
@zindex-tabs:                 42110;
@zindex-screen-lockoverlay:   @zindex-screen-lock - 1;
@zindex-screen-lock:          42200;
@zindex-smart-dropdown:       100001;
@zindex-tooltip:              100001;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  660px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);


// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding for columns
@grid-gutter-width:         @base-unit * 1.5;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width-half:    @base-unit * 0.5;
// General break point for grid
@grid-float-breakpoint:     @screen-tablet;


// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    @base-unit * 3;
@navbar-border-radius:             @border-radius-small;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-100) / 2);

// Navbar links
@navbar-default-link-color:                @color-gray-50;
@navbar-default-link-hover-color:          @color-gray-50;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         @color-gray-50;
@navbar-default-link-active-bg:            transparent;
@navbar-default-link-disabled-color:       @color-gray-100;
@navbar-default-link-disabled-bg:          transparent;

// Navbar text
@navbar-text-line-height:                  @navbar-height;


// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color:                      @color-white;
@navbar-inverse-bg:                         @color-gray-50;
@navbar-inverse-border:                     @color-gray-50;
@navbar-inverse-hover-color:                @color-gray-80;

// Inverted navbar links
@navbar-inverse-link-color:                 @color-white;
@navbar-inverse-link-hover-color:           @color-white;
@navbar-inverse-text-color:                 @color-white;
@navbar-inverse-link-hover-bg:              transparent;
@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg:             transparent;
@navbar-inverse-link-disabled-color:        @color-gray-70;
@navbar-inverse-link-disabled-bg:           transparent;

// Inverted navbar icons
@navbar-inverse-icon-color:					@dark-bg-icon-color;

// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg:                  @color-gray-150;
@navbar-inverse-search-bg-focus:            @color-white;
@navbar-inverse-search-border:              @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color:   #ccc;

// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg:            @color-gray-70;
@navbar-inverse-toggle-icon-bar-bg:         @color-white;
@navbar-inverse-toggle-border-color:        @color-gray-70;

// Navbar menu (User menu, Chat)
@navbar-menu-bg:                            @color-gray-70;

// CMS navbars
@cms-navbar-height:                         @base-unit * 3;
@cms-navbar-toolbar-height:                 @base-unit * 2.5;
@nav-search-width:                          @base-unit * 13;

// Help menu navbar
@cms-navbar-help-bg:						            @color-blue-70;
@cms-navbar-help-hover-bg:					        @color-blue-100;
@cms-navbar-help-submenu-bg:                @color-gray-70;
@cms-navbar-help-submenu-hover-bg:          @color-gray-80;

// Chat
// ------------------------
@chat-navbar-room-bg:					    @color-gray-70;
@chat-navbar-room-hover-bg:		            @color-gray-80;
@chat-navbar-active-room-bg:				@color-green-100;
@chat-navbar-active-room-hover-bg:		    @color-green-70;
@chat-navbar-room-border-color:             @color-gray-80;
@chat-online-color:                         @color-green-100;
@chat-offline-color:                        @color-red-70;          
@chat-req-number-bg:                        @btn-secondary-bg;
@chat-room-help-color:                      @color-gray-70;
@chat-room-offline-user:                    @color-gray-100;
@chat-room-current-user:                    @color-blue-70;
@chat-paging-active-color:                  @color-gray-50;


// Context menu
// ------------------------
@context-menu-bg:                           @color-gray-70;
@context-menu-hover-bg:                     @color-gray-80;
@context-menu-divider:                      @color-gray-80;
@context-submenu-bg:                        @color-gray-80;
@context-submenu-hover-bg:			        @color-gray-90;
@context-submenu-divider:			        @color-gray-90;


// Navs
// -------------------------

@nav-link-padding:                          @base-unit * 0.625 @base-unit;
@nav-link-hover-bg:                         @color-gray-150;

@nav-disabled-link-color:                   @color-gray-130;
@nav-disabled-link-hover-color:             @color-gray-130;

@nav-open-link-hover-color:                 @color-white;
@nav-open-caret-border-color:               @color-white;


// Wizard
// -------------------------

@wizard-title-bg:                           @color-gray-50;
@wizard-title-color:                        @color-white;
@wizard-title-padding:                      @padding-base-horizontal;
@wizard-title-headings:                     @font-size-large;
@wizard-title-line:                         @base-unit;
@wizard-title-border:                       1px solid @color-gray-90;


// Tabs
@nav-tabs-container-bg:                     @color-gray-140;
@nav-tabs-horizontal-height:                @base-unit * 3;
@nav-tabs-vertical-width:                   @base-unit * 13; 
@nav-tabs-back-height:                      @base-unit * 3; 

@nav-tabs-active-link-bg:                   @body-bg;
@nav-tabs-active-link-hover-bg:             @color-gray-150;


// Pagination
// -------------------------

@pagination-text-color:                @color-gray-50;
@pagination-bg:                        @color-gray-150;
@pagination-border:                    @color-gray-100;

@pagination-hover-bg:                  @color-gray-130;

@pagination-active-bg:                 @color-blue-70;
@pagination-active-color:              @color-white;

@pagination-disabled-color:            @color-gray-130;

@pagination-margin-vertical:           @base-unit;
@pagination-margin-horizontal:         @base-unit;

@pagination-label-color:               @color-gray-50;
@pagination-padding-numbers:           @base-unit * 0.125 @base-unit * 0.5;
@pagination-line-height-numbers:       @line-height-100;  
@pagination-padding-first-last:        @base-unit * 0.25;
@pagination-height-first-last:         @base-unit;


// Uniflat pager
//---------------------------

@uniflat_pager-padding:          0 @base-unit;
@uniflat_pager-margin-bottom:    @base-unit;

// Form states and alerts
// -------------------------

@state-warning-text:             @color-orange-70;
@state-warning-bg:               @color-orange-100;
@state-warning-border:           @color-orange-100;

@state-error-text:              @color-red-70;
@state-error-bg:                @color-red-130;
@state-error-border:            @color-red-130;

@state-success-text:             @color-green-70;
@state-success-bg:               @color-green-130;
@state-success-border:           @color-green-130;

@state-info-text:                @color-blue-70;
@state-info-bg:                  @color-blue-130;
@state-info-border:              @color-blue-130;


// Tooltips
// -------------------------
@tooltip-max-width:           @base-unit * 20;
@tooltip-color:               @color-gray-50;
@tooltip-bg:                  @color-orange-130;

@tooltip-arrow-width:         @base-unit * 0.75;
@tooltip-arrow-color:         @tooltip-bg;


// Popovers
// -------------------------
@popover-bg:                          @color-orange-130;
@popover-max-width:                   276px;
@popover-border-color:                @color-gray-130;
@popover-fallback-border-color:       @color-gray-130;

@popover-title-bg:                    @color-orange-130;

@popover-arrow-width:                 @base-unit * 0.5;
@popover-arrow-color:                 @color-orange-130;

@popover-arrow-outer-width:           (@popover-arrow-width + 1);


// Alerts
// -------------------------
@alert-link-font-weight:          bold;

@alert-success-bg:                @state-success-bg;
@alert-success-text:              @state-success-text;
@alert-success-icon-color:        @color-success;
@alert-success-icon-close-color:  @color-success;

@alert-info-bg:                   @state-info-bg;
@alert-info-text:                 @state-info-text;
@alert-info-icon-color:           @color-info;
@alert-info-icon-close-color:     @color-info;

@alert-warning-bg:                @state-warning-bg;
@alert-warning-text:              @state-warning-text;
@alert-warning-icon-color:        @color-warning;
@alert-warning-icon-close-color:  @color-warning;

@alert-error-bg:                  @state-error-bg;
@alert-error-text:                @state-error-text;
@alert-error-icon-color:          @color-error;
@alert-error-icon-close-color:    @color-error;

// Progress bars
// -------------------------
@progress-bg:                 @color-gray-130;
@progress-bar-color:          @color-white;

@progress-bar-bg:             @color-blue-70;
@progress-bar-success-bg:     @color-green-100;
@progress-bar-warning-bg:     @color-warning;
@progress-bar-danger-bg:      @color-error;


// Panels
// -------------------------
@panel-bg:                    @color-white;
@panel-inner-border:          @color-gray-130;
@panel-border-radius:         @border-radius-small;
@panel-footer-bg:             @color-gray-140;
@panel-heading-bg:            @color-gray-140;
@panel-title-bg:              @color-gray-50;
@panel-title-height:          @cms-navbar-height;

@panel-default-text:          @color-gray-50;
@panel-default-border:        @color-gray-50;
@panel-default-heading-bg:    @color-gray-140;

@panel-primary-text:          @color-gray-50;
@panel-primary-border:        @color-gray-130;
@panel-primary-heading-bg:    @color-blue-70;

@panel-success-text:          @color-gray-50;
@panel-success-border:        @color-gray-130;
@panel-success-heading-bg:    @color-green-100;

@panel-warning-text:          @color-gray-50;
@panel-warning-border:        @color-gray-130;
@panel-warning-heading-bg:    @color-warning;

@panel-danger-text:           @color-gray-50;
@panel-danger-border:         @color-gray-130;
@panel-danger-heading-bg:     @color-error;


// Badges
// -------------------------
@badge-color:                 @color-gray-50;
@badge-link-hover-color:      @color-white;
@badge-bg:                    transparent;

@badge-active-color:          @color-white;
@badge-active-bg:             transparent;

@badge-font-weight:           normal;
@badge-line-height:           1;
@badge-border-radius:         @border-radius-base;

@badge-padding-horizontal:    @base-unit * 0.4375; // ~7px
@badge-padding-vertical:      @base-unit * 0.1875; // ~3px


// Breadcrumbs
// -------------------------
@breadcrumb-color:            @color-gray-50;


// Close
// ------------------------
@close-color:                 @color-gray-50;
@close-font-weight:           bold;
@close-text-shadow:           0 1px 0 @color-white;

    
// Dashboard
// ------------------------
@dashboard-bg:              @color-gray-150;
@dashboard-color:           @color-gray-50;
@tile-height:               @base-unit * 9.75;
@tile-width:                @base-unit * 9.75;
@tile-bg:                   @color-white;
@tile-hover-bg:             @color-blue-130;
@tile-red:                  @color-red-70;
@tile-blue:                 @color-blue-100;
@tile-green:                @color-green-100;
@tile-orange:               @color-orange-80;
@tile-gray:                 @color-gray-70;
@empty-tile-border-width:   3px;                  

// Code
// ------------------------
@code-color:                  @color-gray-50;
@code-bg:                     @color-gray-150;

@pre-bg:                      @color-gray-150;
@pre-color:                   @color-gray-50;
@pre-border-color:            @color-gray-130;
@pre-scrollable-max-height:   340px;

// Type
// ------------------------
@text-muted:                  @color-gray-130;
@abbr-border-color:           @color-gray-130;
@headings-small-color:        @color-gray-130;
@blockquote-small-color:      @color-gray-130;
@blockquote-border-color:     @color-gray-150;
@page-header-border-color:    @color-gray-150;

// Dialogs
// ------------------------
@dialog-header-height: @base-unit * 3;
@dialog-header-with-actions-height: @base-unit * 6.5;
@dialog-footer-height: @base-unit * 4;

// Uploader
// -------------------------
@uploader-margin-horizontal:  @base-unit * 0.5;
@uploader-background-color:   @color-white;
@uploader-min-width:          @base-unit * 18;
@uploader-min-width-IE:       @base-unit * 18.125;

// Miscellaneous
// -------------------------

// Hr border color
@hr-border:                   @color-gray-150;

// Horizontal forms & lists
@component-offset-horizontal: 180px;


// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1140px + @grid-gutter-width));

